<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理后台</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- 引入外部头文件 -->
    <include file="layout/header" />
    <!-- 当前文件定制 -->
    <link rel="stylesheet" href="__PUBLIC__/plugins/datatables/dataTables.bootstrap.css">
    <!-- Date Picker -->
    <link rel="stylesheet" href="__PUBLIC__/plugins/datepicker/datepicker3.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="__PUBLIC__/plugins/daterangepicker/daterangepicker-bs3.css">
    <!-- <link rel="stylesheet" href="__PUBLIC__/plugins/datatables/select.bootstrap.min.css"> -->
    <!-- ／定制结束 -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
    <style type="text/css">
 a{
    cursor: pointer
 }
  </style>
</head>

<body class="hold-transition skin-blue sidebar-mini ">
    <div class="wrapper">
        <!-- 菜单 -->
        <include file="layout/menu" name="超级管理员" />
        <!-- ／导航菜单 -->
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1>财务管理<small>后台管理</small></h1>
                <ol class="breadcrumb">
                    <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
                    <li><a href="#">管理</a></li>
                    <li class="active">提现结算</li>
                </ol>
            </section>
            <!-- Main content -->
            <section class="content">
                <div class="row">
                    <div class="col-lg-3 col-xs-6">
                        <!-- small box -->
                        <div class="small-box bg-aqua">
                            <div class="inner">
                                <h3 class="newvip">150</h3>
                                <p>今日提现金额</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-bag"></i>
                            </div>
                            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-3 col-xs-6">
                        <!-- small box -->
                        <div class="small-box bg-green">
                            <div class="inner">
                                <h3>53<sup style="font-size: 20px">¥</sup></h3>
                                <p>总提现额</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-stats-bars"></i>
                            </div>
                            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-3 col-xs-6">
                        <!-- small box -->
                        <div class="small-box bg-yellow">
                            <div class="inner">
                                <h3 class="allvip">＊</h3>
                                <p>余额</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-person-add"></i>
                            </div>
                            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-lg-3 col-xs-6">
                        <!-- small box -->
                        <div class="small-box bg-red">
                            <div class="inner">
                                <h3 class="activevip">＊</h3>
                                <p>＊</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-pie-graph"></i>
                            </div>
                            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                </div>
                <div class="row">
                    <div class="col-md-12 col-lg-12">
                        <div class="box">
                            <div class="box-header">
                                <h3 class="box-title">申请列表</h3>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body">
                                <table id="userlist" class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th class="select-filter">账号名</th>
                                            <th>提现金额</th>
                                            <th>申请时间</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                </div>
                                <!-- /.row -->
                <div class="row">
                    <div class="col-xs-12">
                        <!-- interactive chart -->
                        <!-- Line chart -->
                        <div class="box box-primary">
                            <div class="box-header with-border">
                                <i class="fa fa-bar-chart-o"></i>
                                <h3 class="box-title">统计报表</h3>
                                <div class="pull-right box-tools">
                                    <button type="button" class="btn btn-primary btn-sm daterange pull-right" data-toggle="tooltip" title="Date range">
                                        <i class="fa fa-calendar"></i></button>
                                    <button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse" data-toggle="tooltip" title="Collapse" style="margin-right: 5px;">
                                        <i class="fa fa-minus"></i></button>
                                </div>
                            </div>
                            <div class="box-body">
                                <div id="line-chart" style="height: 300px;"></div>
                            </div>
                            <!-- /.box-body-->
                        </div>
                        <!-- /.box -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
               
            </section>
        </div>
        <!-- /.col -->
        <include file="layout/copyright" />
    </div>
    <!-- /.content-wrapper -->
    </div>
    <!-- ./wrapper -->
    <!-- REQUIRED JS SCRIPTS -->
    <!-- 外头文件 -->
    <include file="layout/footer" />
    <!-- 当前定制 -->
    <script src="__PUBLIC__/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="__PUBLIC__/plugins/datatables/dataTables.bootstrap.min.js"></script>

        <!-- FLOT CHARTS -->
    <script src="__PUBLIC__/plugins/flot/jquery.flot.min.js"></script>
    <!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
    <script src="__PUBLIC__/plugins/flot/jquery.flot.resize.min.js"></script>
    <!-- FLOT PIE PLUGIN - also used to draw donut charts -->
    <script src="__PUBLIC__/plugins/flot/jquery.flot.pie.min.js"></script>
    <!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
    <script src="__PUBLIC__/plugins/flot/jquery.flot.categories.min.js"></script>
    <!-- daterangepicker -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
    <script src="__PUBLIC__/plugins/daterangepicker/daterangepicker.js"></script>
    <!-- datepicker -->
    <script src="__PUBLIC__/plugins/datepicker/bootstrap-datepicker.js"></script>
    <!-- DOM 操作 -->
    <script>
    $(document).ready(function() {

        var table = $('#userlist').DataTable({
            "ajax": {
                "url": "__APP__/Home/Superuser/trade/listcash",
                "data": function(d) {
                    //添加额外的参数传给服务器
                    d.startdate = $('#reportrange span').data('start');
                    d.enddate = $('#reportrange span').data('end')
                }
            },
            "processing": true,
            "serverSide": true,
            // "dom": 'lrtip',
            "paging": true,
            // "lengthChange": false,
            // "searching": true,
            // "ordering": true,
            // "info": true,
            // "autoWidth": true,
            // "bFilter": true,
            "columns": [{
                "data": null
            },  {
                "data": "shop_name"
            }, {
                "data": "number"
            }, {
                "data": "datetime"
            },{
                "data": "status"
            },{
                "data": null
            }],
            "order": [
                [3, 'asc']
            ],
            "columnDefs": [{
                "render": function(data, type, row, meta) {
                    //渲染 把数据源中的标题和url组成超链接
                    return '<a href="__APP__/Home/Superuser/Shop/shopprofile/id/' + row.shop_id + '" target="_blank">' + data + '</a>';
                },
                //指定是第三列
                "targets": 1
            },{
                "render": function(data, type, row, meta) {
                    //渲染 把数据源中的标题和url组成超链接
                    // return '<a href="' + data + '" target="_blank">' + row.title + '</a>';
                    var html = ['<span class="label label-warning">待处理</span>','<span class="label label-info">已结算</span>','<span class="label label-danger">有争议</span>']
                    return html[row.status];
                },
                //指定是第三列
                "targets": 4
            }, {
                "render": function(data, type, row, meta) {
                    //渲染 把数据源中的标题和url组成超链接
                    // return '<a href="' + data + '" target="_blank">' + row.title + '</a>';
                    return '<a onclick="tagdone(' + row.id + ',1)">标记为结算</a>｜<a onclick="tagdone(' + row.id + ',2)">记为争议</a>';
                },
                //指定是第三列
                "targets": 5
            }], 
            "fnDrawCallback": function() {　　
                var api = this.api();　　
                var startIndex = api.context[0]._iDisplayStart; //获取到本页开始的条数
                　　
                api.column(0).nodes().each(function(cell, i) {　　　　
                    cell.innerHTML = startIndex + i + 1;　　
                });
            },
            "oLanguage": {
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有数据",
                "sProcessing": '<div class="overlay"><i class="fa fa-refresh fa-spin"></i></div>',
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "sZeroRecords": "没有检索到数据",
                "sSearch": "搜索:",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"
                }
            },
            initComplete: initComplete,
            "dom": "<'row'<'col-md-9'l<'#mytoolbox'>><'col-md-3'f>r>" +
                "t" +
                "<'row'<'col-md-6'i><'col-md-6'p>>",
        });

        /**
         * 表格加载渲染完毕后执行的方法
         * @param data
         */
        function initComplete(data) {

            var dataPlugin =
                '<div id="reportrange" class="pull-left dateRange" style="width:400px;"> ' +
                '日期：<i class="glyphicon glyphicon-calendar fa fa-calendar"></i> ' +
                '<span id="searchDateRange"></span>  ' +
                '<b class="caret"></b></div><button id="exportxls" class="btn btn-default btn-sm"><i class="glyphicon fa fa-file-excel-o"></i>导出</button> ';
            $('#mytoolbox').append(dataPlugin);
            //时间插件
            $('#reportrange span').html(moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss'));


            $('#exportxls').click(function(){
                // table.ajax.reload();
                //获取dt请求参数
                var d = table.ajax.params();
                d.startdate = $('#reportrange span').data('start');
                d.enddate = $('#reportrange span').data('end');
                window.open('__APP__/Home/Superuser/trade/gencashxls?'+$.param(d));
            });

            $('#reportrange').daterangepicker({
                ranges: {
                    '今天': [moment(), moment()],
                    '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '最近 7 天': [moment().subtract(6, 'days'), moment()],
                    '最近 30 天': [moment().subtract(29, 'days'), moment()],
                    '这个月': [moment().startOf('month'), moment().endOf('month')],
                    '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                startDate: moment().subtract(29, 'days'),
                endDate: moment(),
                locale: {
                    applyLabel: '确定',
                    cancelLabel: '取消',
                    fromLabel: '起始时间',
                    toLabel: '结束时间',
                    customRangeLabel: '自定义',
                    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                        '七月', '八月', '九月', '十月', '十一月', '十二月'
                    ],
                    firstDay: 1
                }
            }, function(start, end, label) {
                $('#reportrange span').data('start', start.format('YYYY-MM-DD HH:mm:ss'));
                $('#reportrange span').data('end', end.format('YYYY-MM-DD HH:mm:ss'));
                $('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
                updateChart(start,end);
                updatebadge(start,end);
            });



            //选择时间后触发重新加载的方法
            $("#reportrange").on('apply.daterangepicker', function() {
                //当选择时间后，出发dt的重新加载数据的方法
                table.ajax.reload();
                //获取dt请求参数
                var args = table.ajax.params();
            });

            function getParam(url) {
                var data = decodeURI(url).split("?")[1];
                var param = {};
                var strs = data.split("&");

                for (var i = 0; i < strs.length; i++) {
                    param[strs[i].split("=")[0]] = strs[i].split("=")[1];
                }
                return param;
            }

        }


        function updatebadge(start, end) {
            $.post('__APP__/Home/Superuser/User/countVip', {
                start: start.format("YYYY-MM-DD HH:mm:ss"),
                end: end.format("YYYY-MM-DD HH:mm:ss")
            }, function(data) {
                $('.newvip').html(data.newvip);
                $('.allvip').html(data.allvip);
                $('.activevip').html(data.activevip);
            }, 'json');
        }

        updatebadge(moment().startOf('day'), moment().endOf('day'));

        updateChart(moment().subtract(6, 'month').startOf('month'), moment().endOf('day'));
            function updateChart(start, end) {

        var dataurl = "__APP__/Home/Superuser/trade/lastcashes";
        $.post(dataurl, {
                start: start.format("YYYY-MM-DD HH:mm:ss"),
                end: end.format("YYYY-MM-DD HH:mm:ss")
            },
            function(donutData) {
                $.plot("#line-chart", [donutData], {
                    grid: {
                        hoverable: true,
                        borderColor: "#f3f3f3",
                        borderWidth: 1,
                        tickColor: "#f3f3f3"
                    },
                    series: {
                        shadowSize: 0,
                        lines: {
                            show: true
                        },
                        points: {
                            show: true
                        }
                    },
                    lines: {
                        fill: false,
                        color: ["#3c8dbc", "#f56954"]
                    },
                    yaxis: {
                        show: true,
                        tickDecimals: 0,
                        // tickSize: 1                        
                    },
                    xaxis: {
                        show: true,
                        mode: "categories",
                        // tickDecimals: 0,
                        // tickSize: 1
                    }
                });
                //Initialize tooltip on hover
                $('<div class="tooltip-inner" id="line-chart-tooltip"></div>').css({
                    position: "absolute",
                    display: "none",
                    opacity: 0.8
                }).appendTo("body");
                $("#line-chart").bind("plothover", function(event, pos, item) {

                    if (item) {
                        var x = item.datapoint[0],
                            y = item.datapoint[1].toFixed(2);

                        $("#line-chart-tooltip").html("订单数" + y)
                            .css({
                                top: item.pageY + 5,
                                left: item.pageX + 5
                            })
                            .fadeIn(200);
                    } else {
                        $("#line-chart-tooltip").hide();
                    }

                });

            }, 'json'
        );

    }

    tagdone = function (id,status) {
            $.get('__APP__/Home/superuser/trade/tagdone/id/' + id+'/status/'+status, function() {
                table.ajax.reload();
            });
        }
    /*
     * Custom Label formatter
     * ----------------------
     */
    function labelFormatter(label, series) {
        return '<div style="font-size:13px; text-align:center; padding:2px; color: #fff; font-weight: 600;">' + label + "<br>" + Math.round(series.percent) + "%</div>";
    }


    });
    </script>
    <!-- ./DOM -->
    <!-- AJAX -->
    <script type="text/javascript">
    $(document).ready(function() {

    });
    </script>
    <!-- /AJAX -->
    <!-- ./定制结束 -->
</body>

</html>